import './index.scss';
import React, { Component } from 'react'
import services from 'services';
import classNames from 'classnames';
import Link from 'components/Link';
import Radio from 'components/Radio';
import Toast from 'components/Toast';
import { trackEvent, _ } from 'libs/tools';
import qs from 'qs';

class Page extends Component {
  state = {
    accept: false
  }

  componentDidMount() {
    const recordId = this.props.match.params.recordId;
    services.Preorder.getPreorderDetail(recordId).then(res => {
      let { data, code } = res.data;

      if (code == 0) {
        this.setState({
          detail: data.recordDetail
        });
      }
    });
  }

  render() {
    let { accept } = this.state;

    return (
      <div className="page-preorder-home">
        <div className="back" onClick={() => {
          trackEvent('queue_info_back_click');
          location.href = 'jzapp://close_web_page';
        }}></div>
        <div className="rules">
          <div className="rules-bd">
          <p>1.预付定金环节，需要完善接种人姓名、身份证号、接种人手机号（手机号会用来接收到苗、支付等重要通知，请务必填写支付人有效手机号）等信息，平台采用微信支付方式，订金支付后直接进入疫苗队列，等待到苗通知</p>
          <p>2.到苗通知环节，到苗后平台会第一时间向您的接种人手机号，以及APP发送到苗通知，按照通知提示完成疫苗尾款的支付</p>
          <p>3.支付尾款环节，从接收到到苗通知到支付尾款的有效时间为2小时，支付成功后，排队结束，可联系客服进行接种预约。未在规定时间内支付尾款将导致排队失效（失效后可页面内申请退首款或重新排队），所以为了保证成功购苗，请务必在收到到苗通知后第一时间支付尾款</p>
          <p>4.预约开针环节，购苗成功后，可通过APP主动联系在线客服人员，进行接种机构及时间预约</p>
          </div>
        </div>
        <div className="float-buttons">
          <div className="float-buttons-hd">
            <Radio checked={accept} onClick={() => this.setState({ accept: !accept })}/>
            <span onClick={() => this.setState({ accept: !accept })}>我已阅读并同意</span>
            <a href="https://app.jzdoctor.com/misc-web/agreement_xcx.html" onClick={e => e.stopPropagation()}>《平台排队协议》</a>
          </div>
          <div className="float-buttons-bd">
            <div className="item" onClick={_.throttle(() => location.href = 'jzapp://message_company', 1500)}>在线客服</div>
            <Link className="item" disabled={!accept} onClick={() => accept ? trackEvent('queue_info_fast_queue_click') : Toast({text:'请先阅读并同意《平台排队协议》'})} to={`/preorder/submit-queue?mobile=${qs.parse(location.href.split('?')[1]).mobile || ''}`}>极速排队</Link>
          </div>
        </div>
      </div>
    );
  }
}

export default Page;